<template>
  <div class="port-box rule-box admin-card-box">
    <!--<p id="tixian" @click="addPort">添加</p>-->
    <div class="equipID">
      <span class="iconfont icon-chongdianzhuang"></span>
      充电桩编号: {{this.deviceNo}}
    </div>
    <div class="rules-list List">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-list>
          <mu-list-item v-for="(item,index) in portList" :key="index">
            <mu-list-item-content>
              <mu-list-item-title>
                <div class="fleft">
                  <p class="title-name">
                    <span class="add-name">{{item.name}}</span>
                    <span class="status-name" style="color:#31D19E">总耗电量：{{item.totalPowerConsumption}}度</span>
                  </p>
                  <p class="xadd">{{item.createtime || '暂无时间'}}</p>
                </div>

                <p class="fright">
                  <span style="color:#1EC3F1">{{item.state | state}}</span>
                  <!-- <span size="25" class="fright iconfont icon-narrow"></span> -->
                </p>
              </mu-list-item-title>
              <mu-list-item-sub-title>
                  <mu-flex>
                <div>
                  <mu-button class="btn" small round flat style="background: #419D3E" @click="switchPort(item.id,1)">开启</mu-button>
                  <mu-button class="btn" small round flat style="background: #7d7e80" @click="switchPort(item.id,0)">关闭</mu-button>
                </div>
                <p class="fright">
                  <span @click="editPort(item,item.state)">
                    <span class="iconfont icon-bianji"></span> 编辑
                  </span>
                  <!--<span style="color:#FB6D3A" @click="deleteport(item.id,item.state)">
                    <span class="iconfont icon-shanchu1"></span> 删除
                  </span>-->
                </p>
                  </mu-flex>
              </mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
          <div v-show="nolist" class="nolist">
            <span class="iconfont icon-charging"></span>
            <p>暂无端口</p>
          </div>
        </mu-list>
      </mu-load-more>
    </div>

    <mu-bottom-sheet :open.sync="addportshow" class="card-choose newcard-box">
      <mu-form label-width="100">
        <span class="iconfont icon-xialajiantou" @click="addportshow=false"></span>
        <p class="title">添加端口</p>
        <mu-list>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">端口名称</span>
              <input
                maxlength="30"
                type="text"
                class="choose-input fright"
                placeholder="请输入端口名称"
                icon="comment"
                v-model="addport.name"
              />
            </div>
          </mu-list-item>
          <!-- <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">端口编号</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入端口编号"
                icon="comment"
                v-model="addport.deviceid"
              />
            </div>
          </mu-list-item>-->
          <mu-list-item style="margin-top:20px">
            <mu-form-item>
              <span class="fleft">端口状态</span>
              <mu-radio v-model="addport.state" value="N" label="空闲"></mu-radio>
              <mu-radio v-model="addport.state" value="Y" label="使用"></mu-radio>
              <mu-radio v-model="addport.state" value="F" label="故障"></mu-radio>
            </mu-form-item>
          </mu-list-item>

          <mu-list-item>
            <mu-button class="btn big-btn" @click="addPort2">确定</mu-button>
          </mu-list-item>
        </mu-list>
      </mu-form>
    </mu-bottom-sheet>

    <mu-bottom-sheet :open.sync="editportshow" class="card-choose newcard-box">
      <mu-form label-width="100">
        <span class="iconfont icon-xialajiantou" @click="editportshow=false"></span>
        <p class="title">编辑端口</p>
        <mu-list>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">端口名称</span>
              <input
                maxlength="15"
                type="text"
                class="choose-input fright"
                placeholder="请输入端口名称"
                icon="comment"
                v-model="editport.name"
                @focus="inputFocus()" @focusout="inputFocusOut"
              />
            </div>
          </mu-list-item>
          <!-- <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">端口编号</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入端口编号"
                icon="comment"
                v-model="editport.deviceid"
              />
            </div>
          </mu-list-item>-->
          <mu-list-item style="margin-top:20px">
            <mu-form-item>
              <span class="fleft">端口状态</span>
              <mu-radio v-model="editport.state" value="N" label="空闲"></mu-radio>
              <mu-radio v-model="editport.state" value="Y" label="使用"></mu-radio>
              <mu-radio v-model="editport.state" value="F" label="故障"></mu-radio>
            </mu-form-item>
          </mu-list-item>

          <mu-list-item>
            <mu-button class="btn big-btn" @click="editPort2">确定</mu-button>
          </mu-list-item>
        </mu-list>
      </mu-form>
    </mu-bottom-sheet>
  </div>
</template>

<script>
    import {Toast} from "vant";
    import "vant/lib/toast/style/index";

    export default {
        data() {
            return {
                timer:null,
                portList: [],
                editportshow: false,
                addportshow: false,
                deviceNo: this.$route.params.id,
                pageNo: 0,
                num: 10,
                loaded_all: false,
                refreshing: false,
                loading: false,
                nolist: true,
                editport: {
                    name: "",
                    // deviceid: "",
                    state: "",
                    id: ""
                },
                addport: {
                    name: "",
                    // deviceid: "",
                    state: ""
                }
            };
        },
        mounted() {
            this.getList();
        },
        filters: {
            state(v) {
                switch (v) {
                    case "N":
                        return (v = "空闲");
                        break;
                    case "Y":
                        return (v = "使用");
                        break;
                    case "F":
                        return (v = "故障");
                        break;
                }
            }
        },
        destroyed(){
            if(this.timer){
                clearTimeout(this.timer)
            }
        },
        methods: {
            inputFocus(){
                if(this.timer){
                    clearTimeout(this.timer)
                }
            },
            inputFocusOut(){
                this.timer = setTimeout(() => {
                    window.scrollTo(0,0)
                },10)
            },
            switchPort(id, type) {
                let params = {
                    id: id,
                    type: type
                }
                this.$api.switchPort(params).then(res => {
                    if (res.data.message.code == 0) {
                        Toast("操作成功");
                    } else {
                        Toast(res.data.message.message);
                    }
                })
            },
            //添加
            addPort() {
                this.addportshow = true;
            },
            addPort2() {
                if (this.addport.name == "") {
                    Toast("请填写端口名");
                    return;
                }
                // if (this.addport.deviceid == "") {
                //   Toast("请填写端口编号");
                //   return;
                // }
                if (this.addport.state == "") {
                    Toast("请选择端口状态");
                    return;
                }
                this.$api
                    .addPort({
                        parkid: this.deviceNo,
                        name: this.addport.name,
                        // deviceid: this.addport.deviceid,
                        state: this.addport.state
                    })
                    .then(res => {
                        console.log(res);
                        if (res.data.message.status == 200) {
                            Toast("添加端口成功");
                            this.addportshow = false;

                            this.addport.name = "";
                            // this.addport.deviceid = "";
                            this.addport.state = "";
                            this.getList();
                        }
                    });
            },
            //编辑
            editPort(obj, state) {
                if (state == "Y") {
                    Toast("此端口正在使用无法编辑");
                    return;
                }
                this.editport.name = obj.name;
                // this.editport.deviceid = obj.deviceid;
                this.editport.state = obj.state;
                this.editport.id = obj.id;

                this.editportshow = true;
            },
            editPort2() {
                if (this.editport.name == "") {
                    Toast("请填写端口名");
                    return;
                }
                // if (this.editport.deviceid == "") {
                //   Toast("请填写端口编号");
                //   return;
                // }
                if (this.editport.state == "") {
                    Toast("请选择端口状态");
                    return;
                }
                this.$api
                    .editPort({
                        id: this.editport.id,
                        parkid: this.deviceNo,
                        name: this.editport.name,
                        // deviceid: this.editport.deviceid,
                        state: this.editport.state
                    })
                    .then(res => {
                        console.log(res);
                        if (res.data.message.status == 200) {
                            Toast("编辑端口成功");
                            this.editportshow = false;

                            this.editport.name = "";
                            // this.editport.deviceid = "";
                            this.editport.state = "";
                            this.pageNo = 0
                            this.getList();
                        }
                    });
                this.editportshow = true;
            },
            //删除
            deleteport(id, state) {
                if (state == "Y") {
                    Toast("此端口正在使用无法删除");
                    return;
                }
                this.$api.delPort(id).then(res => {
                    if (res.data.message.status == 200) {
                        Toast("删除端口成功");
                        this.pageNo = 0
                        this.getList();
                    }
                });
            },

            getList(param) {
                this.pageSize += 3;
                this.$api
                    .getPortList({pageNo: this.pageNo, pageSize: this.num, id: this.deviceNo})
                    .then(res => {
                        console.log(res);
                        if (res.data.data.pages == 1) {
                            Toast("已加载全部数据");
                            this.loaded_all = true;
                        }
                        this.portList = res.data.data.records
                    });
            },
            refresh() {
                this.refreshing = true;
                this.$refs.container.scrollTop = 0;
                setTimeout(() => {
                    this.refreshing = false;
                    this.getList();
                    this.num = 5;
                }, 2000);
            },
            load() {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.num += 5;
                    if (this.deviceNo != "") {
                        this.getList({
                            id: this.deviceNo,
                            pageNo: 1,
                            pageSize: this.num
                        });
                    } else {
                        this.getList();
                    }
                }, 2000);
            }
        },
        watch: {
            portList: function (v) {
                if (v == "") {
                    this.nolist = true;
                } else {
                    this.nolist = false;
                }
            }
        }
    };
</script>

<style>
</style>
